/*
  React生命周期-挂载阶段
  三大阶段：挂载时、更新时、卸载时
  React中触发组件更新：
  1.setState
  2.props变化
  注意：更新阶段的钩子函数中，不能调用setState，会造成死循环
*/
import React from 'react';

class APP extends React.Component {
  state = {
    count: 1000,
  };
  // 更新钩子函数
  componentDidUpdate() {
    console.log('更新触发----->APP');
  }
  handleClick = () => {
    this.setState({
      count: this.state.count + 100,
    });
  };
  // 每次组件渲染都会触发
  render() {
    console.log('渲染前执行----->');
    return (
      <div>
        <h3>{this.state.count}</h3>
        <button onClick={this.handleClick}>点我修改</button>
        <Child count={this.state.count}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  componentDidUpdate() {
    console.log('更新触发----->Child');
  }
  render() {
    return <div></div>;
  }
}

export default APP;
